import { Switch } from 'antd';
import React, { useMemo } from 'react';
import { useContextSelector } from 'use-context-selector';

import { WorkflowContext } from '../../../../../context';
import InputLabel from '../Label';

import type { RenderInputProps } from '../type';

const SwitchRender = ({ item, nodeId }: RenderInputProps) => {
  const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);

  const Render = useMemo(() => {
    return (
      <div className="flex rounded-lg bg-white">
        <div className="flex w-full justify-between p-2">
          <InputLabel nodeId={nodeId} input={item} />
          <Switch
            size="default"
            checked={item.value}
            onChange={(e) => {
              onChangeNode({
                nodeId,
                type: 'updateInput',
                key: item.key,
                value: {
                  ...item,
                  value: e,
                },
              });
            }}
          />
        </div>
      </div>
    );
  }, [item, nodeId, onChangeNode]);

  return Render;
};

export default React.memo(SwitchRender);
